// Copyright (c) 2020 Wang Zemin Personal. All Right Reserved

import React from "react";
import {Dropdown, Menu} from 'antd'
import "./header-bar.css"
import userAvatar from './img/user-avatar.png';
import {clearAccessToken, getUserName} from "../requests/BaseRequest";
import ChangePasswordModal from "../component/modals/ChangePasswordModal";
import {getUserBudget} from "../requests/BudgetManageRequest";

export default class HeaderBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            budgetRemain: 0
        };
    }

    componentDidMount() {
        getUserBudget().then((budget) => {
            this.setState({
                budgetRemain: budget.result.totalAmount - budget.result.usedAmount
            })
        })
    }

    componentWillUnmount() {
    }

    logout = () => {
        clearAccessToken()
        window.location.href = "/";
    }

    changePassword = () => {
        this.state.changePasswordModel.showModal()
    }


    render() {
        const menu = (
            <Menu className='menu'>
                <Menu.ItemGroup title='用户中心' className='menu-group'>
                    <Menu.Item>你好，{getUserName()}</Menu.Item>
                    <Menu.Item><span onClick={this.logout}>退出登录</span></Menu.Item>
                    <Menu.Item><span onClick={this.changePassword}>修改密码</span></Menu.Item>
                </Menu.ItemGroup>
            </Menu>)
        return (
            <>

                <div style={{lineHeight: '64px', float: 'right', marginRight: 100}}>

                    <Dropdown overlay={menu}>
                        <img src={userAvatar} alt="" width='50' height="50"/>
                    </Dropdown>
                </div>

                <div style={{lineHeight: '64px', float: 'right', marginRight: 20}}>
                    <span>用户可用预算：{this.state.budgetRemain}个竹子</span>
                </div>

                <ChangePasswordModal onRef={(ref) => {
                    this.setState({changePasswordModel: ref})
                }}/>
            </>
        )
    }
}